<template>
  <div>
    <!-- 
      这两个主要是为了方便的向深层次的组件进行传值
      $attrs:可以接收父组件除了被当前组件props属性已经接收的所有props传值（class和style除外）
        通过v-bind="$attrs"一次性绑定给后代的组件
      $listeners:可以接收父组件给当前组件绑定的所有自定义事件，我
        通过v-on="$listeners"一次性绑定给后代的组件
     -->

    <h4>Props传值：父的值是{{ count }}</h4>
    <Child
      :count="count"
      :a="a"
      :b="b"
      :c="c"
      :changeCount="changeCount"
      @changeMe="count = $event"
      @changeHer="count = $event"
    />
    <hr />
  </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'Props',
  components: {
    Child
  },
  data() {
    return {
      count: 0,
      a: 1,
      b: 2,
      c: 3
    }
  },
  methods: {
    changeCount(num) {
      this.count += num
    }
  }
}
</script>

<style scoped>
div{
  color: rgb(179, 166, 164);
}
</style>
